<template>
  <div id="" :style="`overflow-y: scroll;height:${height-112.5}px;margin-bottom: 64px; `">
    <div class="home" :style="``">
      <div class="home_topname bg-f">
        <van-row class="flex flex-align">
          <van-col span="20">
            <div class="flex flex-align">
              <div class="" style="width: 40px;height: 40px;margin-right: 13px;">
                <img :src="user.avatar">
              </div>
              <div class="" style="font-family: auto;
 	font-weight: bold;
 	font-size: 15px;color: #000000;">
                {{user.name}}
              </div>
            </div>
          </van-col>
          <van-col span="4" class="f-15 f-bold" style="font-family: auto;
 	font-weight: bold;
 	font-size: 15px;color: #0580FF;" @click="outlogo">切换</van-col>
        </van-row>
      </div>
      <!-- 营收 -->
      <div class="flex-space" style="margin-bottom: 15px;" v-if="IndexPageList">
        <!-- width: 48%; -->
        <div class="bg-left" style="padding:17px 15px 15px 16px;width: 165px;

		">
          <div class="flex flex-space" style="margin-bottom: 32px;">
            <div class="f-bold15 c-0" style="font-family: auto;
 	font-weight: bold;
 	font-size: 15px;color: #000000;">
              总营收
            </div>
            <div class="" style="width: 15px;height: 19px;">
              <img src="../../assets/newHome/revenue2x.png">
            </div>
          </div>
          <div class=" f-bold c-0"
            style="margin-bottom: 10px;font-size: 20px;font-family: auto;font-weight: bold;color: #000000;">
            <span id="" style=" font-size: 18px;font-family: auto;font-weight: bold;color: #000000;">
              {{IndexPageList.totalRevenue}}
            </span>
            <span class="" style="font-size: 19px;font-weight: bold;color: #000000;font-family: auto;">
              元
            </span>
          </div>
          <div class="" style="font-size: 13px;font-weight: 500;color: #BBBBBB;font-family: auto;">
            今日营收:{{IndexPageList.todayRevenue}}元
          </div>
        </div>
        <div class="bg-right" style="padding:17px 15px 15px 16px;width: 165px;">
          <div class="flex flex-space" style="margin-bottom: 32px;">
            <div class="" style="font-family: auto;
 	font-weight: bold;
 	font-size: 15px;">
              总印量
            </div>
            <div class="" style="width: 15px;height: 19px;">
              <img src="../../assets/newHome/PrintL2x.png">
            </div>
          </div>
          <div class="  f-bold c-0" style="margin-bottom: 10px;">
            <span class="" style="font-size: 18px;font-family: auto;font-weight: bold;color: #000000;">
              {{IndexPageList.totalPrintCapacity}}
            </span>
            <span class="" style="font-size: 19px;font-weight: bold;color: #000000;font-family: auto;">
              张
            </span>
          </div>
          <div class="" style="font-size: 13px;font-weight: 500;color: #BBBBBB;font-family: auto;">
            今日印量:{{IndexPageList.printingCapacityToday}}张
          </div>
        </div>
      </div>
      <div class="" style="margin-bottom: 15px;">
        <van-row>
          <van-col span="12" class="flex">
            <div class="" style="width: 7px;height: 20px;background-color: #0580FF;margin-right: 11px;"> </div>
            <div class="flex-align f-bold c-0"
              style="font-size: 15px;font-weight: bold;color: #000000;font-family: auto;">
              今日文档统计明细
            </div>
          </van-col>
          <van-col span="12">
            <div class="flex flex-align" style="float: right;font-family: auto;font-size: 13px; font-weight: bold ">
              <div class="flex-align" @click="seleactive(0)"
                :style="{'color':(seleactivenum==0 ? '#000000' : '#BBBBBB')}">
                文档
              </div>
              <div class="" style="width: 1px;height:10px;background-color: #BBBBBB; margin: 0PX 7PX;"></div>
              <div class="flex-align" @click="seleactive(1)"
                :style="{'color':(seleactivenum==1 ? '#000000' : '#BBBBBB')}">
                照片
              </div>
            </div>
          </van-col>
        </van-row>
      </div>

      <div class="" v-if="seleactivenum==0">
        <div class="flex-space" style="margin-bottom: 15px;" v-if="TodayDetailList">
          <div class="bg-f flex-c"
            style="width: 165px;height: 42px;font-size: 13px;font-weight: 500;font-family: auto;">
            <span id="" style="color: #000000;">
              文档张数:
            </span>
            <span style="color: #0580FF;">{{TodayDetailList.documentPrint}}</span>
            <span id="">
              张
            </span>
          </div>
          <div class="bg-f  flex-c"
            style="width: 165px;height: 42px;font-size: 13px;font-weight: 500;font-family: auto;">
            <span id="">
              文档金额:
            </span>
            <span style="color: #15C78B;">{{TodayDetailList.documentAmount}}</span>
            <span id="">
              元
            </span>
          </div>
        </div>
        <div class="bg-f" style="padding: 15px 10px 15px 10px;margin-bottom: 15px;">
          <div class="flex-space" style="margin-bottom: 5px;">
            <div class="" style="width: 102px;height: 30px; ">
            </div>
            <div id="">
              <div class="flex-c c-ffffff f-500 f-13"
                style="width: 102px;height: 30px;background: #0580FF;border-radius: 5px 5px 0px 0px;position: relative;font-size: 13px;font-weight: 500;font-family: auto;">
                印量(张)
              </div>
              <div class="kailong"
                style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #0580FF;margin: auto;">
              </div>
            </div>
            <div id="">
              <div class="flex-c c-ffffff f-500 f-13"
                style="width: 102px;height: 30px;background: #15C78B;border-radius: 5px 5px 0px 0px;font-size: 13px;font-weight: 500;font-family: auto;">
                金额(元)
              </div>
              <div class="kailong"
                style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #15C78B;margin: auto;">
              </div>
            </div>

          </div>

          <div class="flex-space " v-for="(item,index) in TodayDetailList.documentSku" :key="index"
            style="margin-bottom: 5px;">
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;background-color: #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.skuName}}
            </div>
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.printQuantity}}
            </div>
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.amount}}
            </div>
          </div>

        </div>

      </div>
      <div class="" v-if="seleactivenum==1">
        <div class="flex-space" style="margin-bottom: 15px;" v-if="TodayDetailList">
          <div class="bg-f flex-c"
            style="width: 165px;height: 42px;font-size: 13px;font-weight: 500;font-family: auto;">
            <span id="">
              照片张数:
            </span>
            <span style="color: #0580FF;">{{TodayDetailList.photoPrint}}</span>
            <span id="">
              张
            </span>
          </div>
          <div class="bg-f f-13 f-500 c-0 flex-c"
            style="width: 165px;height: 42px;font-size: 13px;font-weight: 500;font-family: auto;">
            <span id="">
              照片金额:
            </span>
            <span style="color: #15C78B;">{{TodayDetailList.photoAmount}}</span>
            <span id="">
              元
            </span>
          </div>
        </div>
        <div class="bg-f" style="padding: 15px 10px 15px 10px;margin-bottom: 15px;">
          <div class="flex-space" style="margin-bottom: 5px;">
            <div class="" style="width: 102px;height: 30px; ">
            </div>
            <div id="">
              <div class="flex-c c-ffffff f-500 f-13"
                style="width: 102px;height: 30px;background: #0580FF;border-radius: 5px 5px 0px 0px;position: relative;font-size: 13px;font-weight: 500;font-family: auto;">
                印量(张)
              </div>
              <div class="kailong"
                style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #0580FF;margin: auto;">
              </div>
            </div>
            <div id="">
              <div class="flex-c c-ffffff f-500 f-13"
                style="width: 102px;height: 30px;background: #15C78B;border-radius: 5px 5px 0px 0px;font-size: 13px;font-weight: 500;font-family: auto;">
                金额(元)
              </div>
              <div class="kailong"
                style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #15C78B;margin: auto;">
              </div>
            </div>

          </div>

          <div class="flex-space " v-for="(item,index) in TodayDetailList.photoSku" :key="index"
            style="margin-bottom:5px;">
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;background-color: #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.skuName}}
            </div>
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.printQuantity}}
            </div>
            <div class="flex-c f-500 f-13 c-0"
              style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
              {{item.amount}}
            </div>
          </div>

        </div>

      </div>

      <div id="" style="margin-bottom: 15px;">
        <van-row>
          <van-col span="24" class="flex">
            <div class="" style="width: 7px;height: 20px;background-color: #0580FF;margin-right: 11px;"> </div>
            <div class="flex-align" style="font-size: 15px; font-weight: bold;font-family: auto;color: #000000;">
              设备状态
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="bg-f" style="padding: 15px 10px 15px 7px;margin-bottom: 20px;">
        <div id="main" style="width: 100%; height: 300px; overflow: hidden;box-sizing: border-box;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    TodayDetails
  } from '@/api/home/TodayDetails.js'
  import {
    UserInfo
  } from '@/api/home/userInfo.js'
  import {
    DeviceStatus
  } from '@/api/home/DeviceStatus.js'
  import {
    IndexPage
  } from '@/api/home/IndexPage.js'
  export default {
    name: 'Home',
    data() {
      return {
        seleactivenum: 0,
        height: 100,
        user: {}, //头像数据
        IndexPageList: {},
        TodayDetailList: {}, //今日统计明细
        documentList: [{
          name: 'A4黑单',
          num: 100,
          pay: 200
        }, {
          name: 'A4黑双',
          num: 100,
          pay: 200
        }, {
          name: 'A4彩单',
          num: 100,
          pay: 200
        }, {
          name: 'A4双彩',
          num: 100,
          pay: 200
        }, {
          name: '身份证黑白',
          num: 100,
          pay: 200
        }, {
          name: '身份证彩色',
          num: 100,
          pay: 200
        }],
        //柱状图
        yDataArr: [],
        xDataArr: []
      }
    },

    created() {
      this.IndexPages(); //总营数  总印量
      this.TodayDetail() //今日统计明细
      this.DeviceStatusEcharts(); //获取echarts数据
      this.getUserInfo();

    },
    mounted() {
      this.showchart(); //echarts
      this.client() //获取高度
    },
    methods: {
      client() {
        this.$nextTick(() => {
          this.height = document.body.clientHeight;
          // console.log(this.height, '位置')
        });
      },
      seleactive(num) {
        console.log(num)
        this.seleactivenum = num
      },

      // 退出切换
      outlogo() {
        this.$store.dispatch('user/logout').then(res => {
         window.localStorage.clear()
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        })

      },
      getUserInfo() {
        UserInfo().then(res => {
          this.user = res.data;
          let useradta = JSON.stringify(res.data)
          localStorage.setItem('user', useradta)
          // localStorage.setItem('name',res.data.name)
          console.log(res, '头像')
        })
      },
      IndexPages() {
        IndexPage().then(res => {
          this.IndexPageList = res.data;
          console.log(res, 'res')
        })
      }, //首页 今日收益详情
      TodayDetail() {
        TodayDetails().then(res => {
          this.TodayDetailList = res.data;
          console.log(res, 'TodayDetails')
        })
      },
      showchart() {
        DeviceStatus().then(res => {
          console.log(res, 'echarts');
          let arr = res.data;
          this.yDataArr[5] = arr.total;
          this.yDataArr[4] = arr.onlineCount;
          this.yDataArr[3] = arr.oflineCount;
          this.yDataArr[2] = arr.paperJamCount;
          this.yDataArr[1] = arr.lackOfInkCount;
          this.yDataArr[0] = arr.lackOfPaperCount;
          // this.yDataArr.forEach((item,index)=>{
          // 	this.yDataArr[index]=this.yDataArr[index]+'台'
          // })
          this.xDataArr = ['缺纸', '缺墨', '卡纸', '离线', '在线台数', '总台数'];
          console.log(this.yDataArr, 'yDataArr')
          //再调用图标函数
          this.$nextTick(() => {
            this.getStatisticalLine();
          });
        })
      },
      getStatisticalLine() {
        let myChart = echarts.init(document.getElementById("main")); //引用带有id的标签
        let option = { //图表的样式
          color: ['#0580FF'],
          xAxis: {
            type: 'category',

            data: this.xDataArr,
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: 0, //-30度角倾斜显示
              textStyle: {
                color: '#BBBBBB',
                fontSize: '12',
                fontWeight: "bold",
                fontFamily: 'system-ui'
              }
            },
            axisLine: { //y轴
              show: false

            },
            // 取消坐标轴刻度线
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }, //去除网格区域

          },
          yAxis: {
            type: 'value',
            show: false
          },

          grid: {
            height: 217
          },

          series: [{
            // data:[120, 200, 150, 80, 70, 110],
            data: this.yDataArr,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barGap: '80%',
            /*多个并排柱子设置柱子之间的间距*/
            // barCategoryGap: '50%',
            /*多个并排柱子设置柱子之间的间距*/
            barWidth: 33, //柱图宽度
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              backgroundColor: "#333333",
              width: 39,
              height: 20,
              lineHeight: 20,
              borderRadius: 5,
              textStyle: {
                color: '#BBBBBB ',
                fontSize: '12',
                fontWeight: "bold",
                fontFamily: 'system-ui'
              }
            }
          }]

        }
        myChart.setOption(option); //绘制 必须要有
        window.addEventListener("resize", () => { //根据屏幕进行实时绘制
          myChart.resize();
        });
      },
      // 首页机器状态
      DeviceStatusEcharts() {


      },
    }
  }
</script>
<style>
  .bg-left {
    background: url(../../assets/newHome/YSbg2x.png);
    /* background: url('../../assets/newHome/YS20bg2x.png') no-repeat; */
    background-size: 100%;
  }

  .bg-right {
    background: url(../../assets/newHome/YLbg2x.png);
    /* background: url('../../assets/newHome/YS20bg2x.png') no-repeat; */
    background-size: 100%;
  }

  .selewd {
    font-family: system-ui;
    font-weight: 500;
    font-size: 13px;
    color: #000000;
  }

  .noselewd {
    font-family: system-ui;
    font-weight: 500;
    font-size: 13px;
    color: #BBBBBB;
  }

  /* @import "../../common/fress.css"; */
  .home {
    margin: 0px 15px;
    height: 100vh;

  }

  .home_topname {
    background-color: #FFFFFF;
    border-radius: 5px;
    width: 100%;
    padding: 15px;
    /* height: 70px; */
    box-sizing: border-box;
    overflow: hidden;
    margin: 24px 0px 15px 0px;
  }

  .f-bold12 {
    font-family: system-ui;
    font-weight: bold;
    font-size: 12px;
  }

  .f-bold13 {
    font-family: system-ui;
    font-weight: bold;
    font-size: 13px;
  }

  .f-bold15 {
    font-family: system-ui;
    font-weight: bold;
    font-size: 15px;
  }

  .f-bold22 {
    font-family: system-ui;
    font-weight: bold;
    font-size: 22px;
  }

  .f-50012 {
    font-family: system-ui;
    font-weight: 500;
    font-size: 12px;
  }

  .f-50013 {
    font-family: system-ui;
    font-weight: 500;
    font-size: 13px;
  }

  .f-50015 {
    font-family: system-ui;
    font-weight: 500;
    font-size: 15px;
  }

  .f-50022 {
    font-family: system-ui;
    font-weight: 500;
    font-size: 22px;
  }





  .c-0 {
    color: #000000;
  }

  .c-ffffff {
    color: #FFFFFF;
  }

  .c-lanse {
    color: #0580FF;
  }

  .c-BBBBBB {
    color: #BBBBBB;
  }

  .c-15C78B {
    color: #15C78B;
  }

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }
</style>
